/* Benxin UI - Liquid Glass 基础样式 */

/* CSS 变量定义 */
:root {
  /* 玻璃效果相关 */
  --bx-glass-bg: rgba(255, 255, 255, 0.08);
  --bx-glass-bg-hover: rgba(255, 255, 255, 0.12);
  --bx-glass-border: rgba(255, 255, 255, 0.15);
  --bx-glass-border-hover: rgba(255, 255, 255, 0.25);
  --bx-glass-blur: blur(32px);
  --bx-glass-blur-strong: blur(40px);
  --bx-glass-saturate: saturate(180%);
  
  /* 阴影效果 */
  --bx-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.08);
  --bx-shadow-medium: 0 16px 48px rgba(0, 0, 0, 0.12);
  --bx-shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.18);
  --bx-shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --bx-shadow-inset-dark: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  
  /* 圆角 */
  --bx-radius-small: 8px;
  --bx-radius-medium: 16px;
  --bx-radius-large: 24px;
  --bx-radius-xl: 28px;
  
  /* 间距 */
  --bx-spacing-xs: 4px;
  --bx-spacing-sm: 8px;
  --bx-spacing-md: 16px;
  --bx-spacing-lg: 24px;
  --bx-spacing-xl: 32px;
  
  /* 字体 */
  --bx-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bx-text-primary: rgba(255, 255, 255, 0.98);
  --bx-text-secondary: rgba(255, 255, 255, 0.8);
  --bx-text-tertiary: rgba(255, 255, 255, 0.6);
  
  /* 动画 */
  --bx-transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bx-transition-medium: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bx-transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* 主题色 */
  --bx-primary: rgba(0, 122, 255, 0.25);
  --bx-primary-border: rgba(0, 122, 255, 0.4);
  --bx-primary-shadow: rgba(0, 122, 255, 0.2);
  --bx-success: rgba(52, 199, 89, 0.25);
  --bx-warning: rgba(255, 149, 0, 0.25);
  --bx-danger: rgba(255, 59, 48, 0.25);
}

/* 基础重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基础玻璃效果类 */
.bx-glass {
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur) var(--bx-glass-saturate);
  -webkit-backdrop-filter: var(--bx-glass-blur) var(--bx-glass-saturate);
  border: 1px solid var(--bx-glass-border);
  box-shadow: 
    var(--bx-shadow-medium),
    var(--bx-shadow-light),
    var(--bx-shadow-inset-light),
    var(--bx-shadow-inset-dark);
  transition: all var(--bx-transition-medium);
}

.bx-glass:hover {
  background: var(--bx-glass-bg-hover);
  border-color: var(--bx-glass-border-hover);
  box-shadow: 
    var(--bx-shadow-strong),
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* 渐变叠加效果 */
.bx-glass-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0.12) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity var(--bx-transition-medium);
}

.bx-glass-gradient:hover::before {
  opacity: 0.8;
}

/* 外发光效果 */
.bx-glass-glow::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: calc(var(--bx-radius-large) + 2px);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--bx-transition-medium);
}

.bx-glass-glow:hover::after {
  opacity: 1;
}

/* 文字样式 */
.bx-text-primary {
  color: var(--bx-text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bx-text-secondary {
  color: var(--bx-text-secondary);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.bx-text-tertiary {
  color: var(--bx-text-tertiary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  :root {
    --bx-spacing-lg: 20px;
    --bx-spacing-xl: 28px;
  }
}

/* 浮动动画 */
@keyframes bx-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

.bx-float {
  animation: bx-float 6s ease-in-out infinite;
}

/* 脉冲动画 */
@keyframes bx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.bx-pulse {
  animation: bx-pulse 2s ease-in-out infinite;
}

